<template>
  <div class="login" :style="style">
    <!--<div class="box" :style="boxstyle"></div>-->
    <img src="../../assets/icon_logo.png" class="imgView"/>
    <div class="input_box">
      <div class="text">
        <span style="font-size: 18px;">欢迎登录<span style="font-size: 12px;color: #bd2f2e;">{{rolename}}</span></span>
        <span style="font-size: 12px" @click="changeRole">切换角色</span>
      </div>
      <div class="phone">
        <input style="border:none;outline:medium" type="text" maxlength="11" v-model="phone" placeholder="请输入手机号">
        <div class="split"></div>
      </div>
      <div class="code">
        <input style="border:none;outline: medium; display:inline-block;" type="password" v-model="code"
               :placeholder="role==1?'请输入验证码':'请输入密码'">

        <div v-if="role==1&&!isSend" style="display:inline-block;" @click="getCode">获取验证码</div>
        <div v-if="role==1&&isSend" style="display:inline-block;">{{second}}秒</div>
        <div class="split" style="clear: both;"></div>
      </div>
      <el-radio v-model="radio" label="1"><span style="color: #bd2f2e" @click="onOpenAgreement">《用户注册协议》</span>
      </el-radio>
      <div class="buttonView">
        <button class="submitButton" @click="submit">登录</button>
      </div>
    </div>
    <el-dialog title="用户注册协议" :visible.sync="agreementInfoDialog" width="80%">
      <div id="container" class="dialog_look">
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="dialog_text" @click="agreementInfoDialog = false">
          <span>确定</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        style: {
//          backgroundImage: "url(" + require("../../assets/bg1.png") + ")",
          backgroundRepeat: "no-repeat",
          // backgroundSize: "25px auto",
          // marginTop: "5px",
          height: "100%"
        },
        radio: '0',
        agreementInfoDialog: false,
        agreementInfo: '',
        phone: "",
        code: "",
        role: 2,
        rolename: "(经纪人)",
        isSend: false,
        second: 60,
      };
    },

    mounted() {
      // 计算高度
      // this.setHeightWidth();
      // window.onresize = function() {
      //   this.setHeightWidth();
      // };
      if (sessionStorage.getItem("success")) {
        this.radio = '1';
      }
      var token = sessionStorage.getItem("token");
      var userRole = sessionStorage.getItem("userrole");
      var uid = sessionStorage.getItem("uid");
      if (token != null) {
        if (userRole === '1') {
          this.$router.push({path: '/actorAboutPc'})
        } else {
          this.$router.push({path: '/aboutPc'})
        }
      }

    },
    methods: {
      setHeightWidth() {
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;
        console.log(width);
        console.log(height);
        this.style.width = width + "px";
        this.style.height = height + "px";
      },
      getCode() {
        let self = this;
        let obj = {
          phone: self.phone
        };
        self.$post("/Sms/pushPhoneCode", obj).then(res => {
          if (res.code === "200") {
            if (!self.isSend) {
              self.isSend = true;
              let interval = window.setInterval(function () {
                if (self.second-- <= 0) {
                  self.second = 60;
                  self.isSend = false;
                  window.clearInterval(interval);
                }
              }, 1000);
            }
          } else {
            self.$message(res.message);
          }
        });
      },
      // 登录
      submit() {
        let self = this;
        if (this.radio !== '1') {
          this.$message("请选择用户注册协议");
          return;
        }
        if (self.role == 1) {
          let obj = {
            phone: self.phone,
            phoneCode: self.code,
          };
          self.$post("/Account/loginPhoneUser", obj).then(res => {
            if (res.code === "200") {
              sessionStorage.setItem("token", res.data.token);
              sessionStorage.setItem("userrole", res.data.userRole);
              sessionStorage.setItem("uid", res.data.uid);
              self.globalData.setToken(res.data.token);
              self.$message("登录成功");
              self.$router.push({
                path: '/actorAboutPc',
              })

            } else {
              self.$message(res.message);
            }
          });
        } else {
          let obj = {
            adminName: self.phone,
            password: self.code,
          };
          self.$post("/Account/loginUser", obj).then(res => {
            if (res.code === "200") {
              sessionStorage.setItem("token", res.data.token);
              self.globalData.setToken(res.data.token);
              sessionStorage.setItem("userrole", res.data.userRole);
              sessionStorage.setItem("uid", res.data.uid);
              self.globalData.setToken(res.data.token);
              self.$message("登录成功");
              self.$router.push({path: '/aboutPc'})

            } else {
              self.$message(res.message);
            }
          });
        }

      },

      changeRole(){
        this.code = '';
        if (this.role === 2) {
          this.role = 1;
          this.rolename = "(艺人)";
        } else {
          this.role = 2;
          this.rolename = "(经纪人)"
        }
      },
      onOpenAgreement(){
        this.agreementInfoDialog = true;
        let self = this;
        let obj = {id: 1};
        self.$fetch("/Category/about", obj).then(res => {
          if (res.code === "200") {
            self.agreementInfo = res.data.content;
            document.getElementById('container').innerHTML = self.agreementInfo;
          } else {
            self.$message(res.message);
          }
        });
      }
    }
  };
</script>

<style lang="less" scoped>
  .login {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    .box {
    }
    .input_box {
      width: 300px;
      height: 260px;
      padding: 20px 20px;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: space-around;
      border-width: 1px;
      /*box-shadow: 2px 2px 3px #f1f1f1;*/
      .buttonView {
        display: flex;
        flex-direction: column;
        align-items: center;
        .submitButton {
          width: 200px;
          background-color: #bd2f2e;
          color: white;
          height: 40px;
          border-radius: 4px;
        }
      }
      .split {
        height: 1px;
        width: 100%;
        background-color: #f1f1f1;
        margin-top: 10px;
      }
      input {
        font-size: 16px;
      }

    }
    .text {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .imgView {
    width: auto;
    height: 200px;
    align-items: center;
    margin-right: 100px;
  }

</style>
